<template>
  <div class="about">
   <mt-header :title="this.$route.params.dutyParentDesc">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="aboutBody">
     <div ref='titleList' class="titleList">
        <div v-for="(e,i) in detailList" :key="i" :class="e.type == '0'?'':'cardRight'">
					<div class='cardMeta'>
						<!-- <span class='imgSpan'>
						<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
						</span> -->
					</div>
					<div class='cardMetaDetail'>
						<div class='cardMetaTitle'>
						{{e.personName || '未命名用户'}}(<a :href="'tel:'+e.personPhone">{{e.personPhone}}</a>)
						</div>
						<div class='cardMetaDescription'>{{e.content}}&ensp;</div>
						<div class='showtime'><date :datelong='e.submitDate'></date></div>
					</div>
				</div>
     </div>
      <div class="bottomText" v-if="($route.params.selected == '0' || $route.params.selected == '1') && $store.state.levelData.isEdit == '1'">
        <div class="textareaDiv">
            <div class="preTextarea">{{captcha}}</div>
            <textarea class="textarea" v-model="captcha"></textarea>
        </div>
        <mt-button @click="changeCapCha" type="primary">提交</mt-button>
      </div>
    </div>
    <loading v-show="showLoading"></loading>
  </div>
</template>
<script>
import loading from "@/components/loading.vue";
import date from "@/components/date.vue";
import { Toast, Indicator } from 'mint-ui';
export default {
  name: "about",
  components: {
    loading,
    date
  }, 
  data(){
    return {
      detailList:[],
      captcha:'',
      showLoading:false,
    }
  },
  methods:{
    changeCapCha(){
      var _this = this
      if(!_this.captcha.replace(/^\s+|\s+$/g,"")){ 
        _this.captcha = '';
        Toast({
          message: '内容不能为空',
        }); 
        return
      }
       Indicator.open({
        text: 'Loading...',
        spinnerType: 'fading-circle'
      });  
      this._https({
       url:'/apigw/v1/paracell/api/relationLog/createRelationLog',
       method:'post',
       data:{
         ...this.$route.params,
        content:_this.captcha,
        type:'1',
        personCode:this.$store.state.userInfo.userName,
        personPhone:this.$route.params.dutyPhone,
        personName:this.$store.state.userInfo.name,
        relationId:this.$route.params.relationInfoId
       }
       }).then((res) => {
         Indicator.close()
        if(res.data.success){
        this.detailList = res.data.data;
        Toast({
          message: '提交成功',
        }); 
         _this.captcha = '';
        _this.getDetailList()
        }else{
        Toast({
          message: res.data.error || res.data.msg,
        });
        }
      }, (err) => {
         Indicator.close()
         alert(err)
      })
    },
    getDetailList(){
       this._https({
        url:'/apigw/v1/paracell/api/relationLog/queryRelationLog',
        method:'post',
        data:{
          ...this.$route.params,
          relationId:this.$route.params.relationInfoId
        }
        }).then((res) => {
          
          if(res.data.success){
            this.detailList = res.data.data.sort((a,b)=>{
              return a.submitDate - b.submitDate
            });
          }else{
            alert(res.data.error)
          }
          if(this.$refs.titleList.lastChild){
            this.$refs.titleList.lastChild.scrollIntoView(false)
          }
        }, (err) => {
          alert(err)
        })
    },
  },
  mounted: function () {
    this.getDetailList()
  },
  updated: function () {
    if(this.$refs.titleList && this.$refs.titleList.lastChild){
      this.$refs.titleList.lastChild.scrollIntoView(false)
    }
    
  },
};
</script>

<style lang="scss">
.about{
  background:#dee4de;
  .imgSpan{
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0,0,0,.65);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 50%;
    }
  .imgSpan > img{
    height: 100%;
    display: block;
    width: 100%;
  }
  .cardMeta {
    padding-right: 10px;
    float: left;
  }
  .cardMetaDetail {
    overflow: hidden;
    text-align: left;
  }
  .cardMetaTitle {
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: rgba(0,0,0,.85);
    font-weight: 500;
    margin-top:10px;
  }

  .cardMetaTitle {
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: rgba(0,0,0,.85);
    font-weight: 500;
    margin-top:10px;
  }

  .cardMetaDescription {
    background: rgba(38, 162, 255, 0.71); 
    max-width: 60%;
    color: rgba(0,0,0,.75);
    border-radius: 4px;
    padding: 5px;
    margin-top: 10px;
    margin-left: 10px;
    position: relative;
    display: inline-block;
    word-wrap: break-word;
    text-align: left;
    white-space: pre-line;
  }

  .textareaDiv{
    position:relative;
    width: 100%;
    min-height: 30px;
    .preTextarea{
      display:block;
      visibility:hidden;
      width: 100%;
      font: 400 14px Arial;
      padding-top: 8px;
      padding-bottom: 2px;
      word-break: break-word;
      margin: 0px;
      white-space: pre-line;
    }
    .textarea{
      position:absolute;
      top:0;
      left:0;
      height: 100%;
      width: 100%;
      font: 400 14px Arial;
      padding-top: 8px;
      padding-bottom: 2px;
    }
  }
}







.cardRight .cardMetaDescription{
 background: rgba(255, 255, 255, 1); 
}
.cardRight .cardMeta{
 float: right;
 padding-right: 0px;
 padding-left: 10px;

}
.cardRight .cardMetaTitle{
 text-align: right;
}
.cardRight .cardMetaDetail{
 text-align: right;
}

.cardRight .cardMetaDescription{
 
 margin-right: 10px;

}

.cardMetaDescription:before {
 content: "";
 width: 0;
 height: 0;
 right: 100%;
 top: 7px;
 position: absolute;
 border-top: 0px solid transparent;
 border-right: 10px solid rgba(38, 162, 255, 0.71); ;
 border-bottom: 12px solid transparent;
}


.cardRight .cardMetaDescription:before {
 left: 100%;
 border-left: 10px solid rgba(255, 255, 255, 0.71);
 border-bottom: 12px solid transparent;
 border-right: 0px solid ;
}
.showtime{
 text-align: center;
 font-size: 12px;
}
.aboutBody{
  height: calc(100vh - #{40px});
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.titleList{
    overflow: auto;
}
.bottomText{
  display: flex;
  align-items: flex-end;
  min-height: 30px;
  button{
    font-size: 14px;
    height: 30px;
    width: 70px;
  }
}
      
    


</style>

